<template>
	<view class="content">
		<u-navbar background="#F8F8F8;" :is-back="false" title="Tima首页"></u-navbar>
		<view class="swiper-title">
			<u-swiper @click="toSwiper" border-radius='0' mode="number" indicator-pos="topRight" :list="list" :title="list" height="350">
			</u-swiper>
		</view>
		<view class="title">
			<view class="hot">头脑风暴</view>
			<u-button shape="circle" size="mini" @click="this.$u.route('/pages/index/search')">
				全部<u-icon name="arrow-right"></u-icon>
			</u-button>
		</view>
		<view class="main">
			<card-list v-for="(item, index) in config" :key="index" :config="item" @like='like'></card-list>
			<u-loadmore :status="status" icon-type="flower" :load-text="loadText" />
		</view>
		<u-no-network></u-no-network>
	</view>
</template>
<script>
	let skip = 0
	let cid = null
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				list: [],
				config: [],
				status: 'loadmore',
				loadText: {
					loadmore: '没有内容',
					loading: '努力加载中',
					nomore: '没有更多了',
				}
			}
		},
		onLoad() {
			// 轮播图
			db.collection('swiper').field({
				_id:true,
				image:true,
				title:true
			})
			.get().then(res=>{
				this.list = res.data
			}).catch(err=>{
				console.log(err);
			})
		},
		onShow() {
			this.config = []
			skip = 0
			this.status = "loading"
			this.getTemplate()
		},
		onReachBottom() {
			if (this.status == "loading") {
				skip += 10
				this.getTemplate()
			} else {
				this.status = "nomore"
			}
		},
		methods: {
			toSwiper(index){
				const id = this.list[index]._id
				this.$u.route('/pages/index/swiper?id='+id)
			},
			getTemplate() {
				wx.cloud.callFunction({
					name: "getTemplate",
					data: {
						skip,
						tempId: 0,
						is_template: false,
						action: 'getTemplist'
					},
					success: res => {
						this.config.push(...res.result.data)
						this.$u.toast(`获取到${res.result.data.length}条`)
						if (res.result.data.length == 0 || res.result.data.length < 10) {
							this.status = 'nomore'
						} else {
							this.status = "loading"
						}
					},
					fail: err => console.log("getTemplate出错：", err)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.content {
		padding: 20rpx;

		.card-comments {
			width: 710rpx;
			padding: 20rpx;
		}

		.swiper-title {
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 0 10rpx 6rpx #f0f0f0;
		}

		.title {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;

			.hot {
				padding: 0 16rpx;
				font-size: 38rpx;
				font-weight: bold;
				border-left: 4px solid #38a6e0;
			}
		}
	}
</style>
